<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />
<!DOCTYPE html>
<html>
<head>
    <title>Insert title here</title>
    <link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/> <!-- 页面整体布局样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" /> <!-- 菜单样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen" /> <!-- 焦点图样式定义 -->

    <style type="text/css">
        form{ position:relative; left:50px; }
        .input_field { width: 620px; padding: 15px 0px; vertical-align:middle;}
        .input_field p { position:relative; left:58px; margin: 0px 0px; }
        .input_field label { float: left; position:relative; top: 3px; }
        .input_field input { position:relative; }
        .input_field span { position:relative; left: 4px; color:#a8abab; }
        .input_field .codespan{ position:relative; top: -5px; left: 20px; }
        .input_field .vicode { position:relative; top:-6px; width:72px;  }
        .input_field img { position:relative; left:8px; width:72px; height:21px; }
        .input_field .imgchange { position:relative; top:-5px; left:15px; width:72px; height:21px; }
        .input_field .sub{ position:relative; left:58px; width:162px; }
        .input_field .toreg{ float: right; position:relative; top:4px; right:308px; }
        #imgcode{width: 86px;}
        label{
            display: inline-block;
            width: 100px;
            text-align: left;
        }
    </style>

    <script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.nivo.slider.pack.js"></script> <!-- 焦点图JS脚本定义 -->

    <script type="text/javascript">
        //验证用户名
        function chkusername(){
            var name=$("#username").val();
            if(name == null || name.length == 0){
                $("#un_msg").html("请输入用户名");
                $("#un_msg").css("color","#f31106");
                return false;
            }
            var regexp = /^[a-zA-Z]{1}[a-zA-Z0-9_]{1,7}$/;
            if(!regexp.test(name)){
                $("#un_msg").html("用户名不符合要求");
                $("#un_msg").css("color","#f31106");
                return false;
            }
            else{
                $("#un_msg").html("用户名可以使用");
                $("#un_msg").css("color","green");
                return true;
            }
        }
        //验证手机号
        function chkphone() {
            var phone = $("#phone").val();
            if(phone == null || phone.length == 0){
                $("#phone_msg").html("请输入手机号码");
                $("#phone_msg").css("color","#f31106");
                return false;
            }

            var regexp=/^1[34578]\d{9}$/;
            if(!regexp.test(phone)){
                $("#phone_msg").html("手机号不符合要求");
                $("#phone_msg").css("color","#f31106");
                return false;
            }else{
                $("#phone_msg").html("手机号可以使用");
                $("#phone_msg").css("color","green");
                return true;
            }
            if(phone.length!=11){
                $("#phone_msg").html("手机号不符合要求");
                $("#phone_msg").css("color","#f31106");
                return false;
            }
        }
        var ctx = "${pageContext.request.contextPath}";


        //验证密码
        function chkpassword() {
            var passwd=$("#password").val();
            if(passwd == null || passwd.length == 0){
                $("#pw_msg").html("请输入密码");
                $("#pw_msg").css("color","#f31106");
                return false;
            }
            var regexp = /^[a-zA-Z0-9]{1}[a-zA-Z0-9_]{5,15}$/;
            if(!regexp.test(passwd)){
                $("#pw_msg").html("密码不符合要求");
                $("#pw_msg").css("color","#f31106");
                return false;
            }
            else{
                $("#pw_msg").html("密码可以使用");
                $("#pw_msg").css("color","green");
                return true;
            }
        }
        //验证确认密码
        function chkconfirm() {
            var confirm=$("#confirm").val();
            if(confirm == null || confirm.length == 0){
                $("#confirm_msg").html("请输入确认密码");
                $("#confirm_msg").css("color","#f31106");
                return false;
            }
            if(confirm !=$("#password").val()){
                $("#confirm_msg").html("确认密码需要与密码保持一致");
                $("#confirm_msg").css("color","#f31106");
                return false;
            }else {
                $("#confirm_msg").html("密码一致");
            }
            return true;
        }
        //验证码
        function chkimgcode() {
            var vicd=$("#vicode").val();
            if(vicd == null || vicd.length == 0){
                $("#vicd_msg").html("请输入验证码");
                $("#vicd_msg").css("color","#f31106");
                return false;
            }
            var regexp = /^[a-zA-Z0-9]{4}$/;
            if(!regexp.test(vicd)){
                $("#vicd_msg").html("验证码不符合要求");
                $("#vicd_msg").css("color","#f31106");
                return false;
            }
            return true;
        }
        function showUserName(){
            var name = "${user.username}";
            if(name != ""){
                $("#login").html(name);
                $("#exitP").show();
                $("#login").attr("href", ctx + "/user?flag=info&userId=${user.userid}");
            }else{
                $("#login").html("登录");
                $("#exitP").hide();
                $("#login").attr("href", ctx + "/user?flag=login");
            }
        }
    </script>
</head>

<body>
<div id="templatemo_body_wrapper">
    <div id="templatemo_wrapper">

        <!-- header -->
        <div id="templatemo_header">
            <div id="site_title"><h1><a href="">穿美在线鞋城</a></h1></div>
            <div id="header_right">
                <p>
                    <a href="${ctx}/user?flag=login" id="login">登录</a>&nbsp;
                    <span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
                </p>
            </div>
            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_header -->


        <!-- menu -->
        <div id="templatemo_menubar">
            <div id="top_nav" class="ddsmoothmenu">
                <ul>
                    <li><a href="" class="selected">首页</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">我的购物车</a></li>
                    <li><a href="">我的订单</a></li>
                </ul>
                <br style="clear: left" />
            </div> <!-- end of ddsmoothmenu -->
        </div><!-- END of templatemo_menubar -->


        <!-- main -->
        <div id="templatemo_main">

            <!-- 内容展示区 -->
            <div id="content" class="float_r" style="margin-left:220px;margin-top:20px;">
                <h3>注册</h3>
                <form action="${ctx}/user" method="post" id="regform">
                    <input type="hidden" id="flag" name="flag" value="rs" />

                    <div class="input_field">
                        <p style="color:red">${message}</p>
                    </div>

                    <div class="input_field">
                        <label for="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label>
                        <input type="text" id="username" name="username" value="" />
                        <span id="un_msg">2~8个字符，可使用字母、数字、下划线、需以字母开头</span>
                    </div>

                    <div class="input_field">
                        <label for="phone">手机号码&nbsp;：</label>
                        <input type="text" id="phone" name="phone" maxlength="11" value="" />
                        <span id="phone_msg">请输入11位有效手机号码</span>
                    </div>

                    <div class="input_field">
                        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;：</label>
                        <input type="text" id="password" name="password" value="" />
                        <span id="pw_msg">6~16个字符，区分大小写</span>
                    </div>

                    <div class="input_field">
                        <label for="confirm">确认密码&nbsp;：</label>
                        <input type="text" id="confirm" name="confirm" value="" />
                        <span id="confirm_msg">请与密码保持一致</span>
                    </div>

                    <div class="input_field">
                        <label for="vicode">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</label>
                        <input type="text" id="vicode" name="vicode" maxlength="4" class="vicode" value="" />
                        <img id="imgcode" alt="" src="${ctx}/DrawImage?createTypeFlag=nl" />
                        <a href="javascript:void(0);" class="imgchange">看不清，换一张</a>
                        <span id="vicd_msg" class="codespan">请输入4位验证码，不区分大小写</span>
                    </div>

                    <div class="input_field">
                        <input type="submit" class="sub" value="注册">
                    </div>
                </form>

            </div>
            <div class="cleaner"></div>
        </div><!-- END of templatemo_main -->


        <!-- footer -->
        <div id="templatemo_footer">
            <p>
                <a href="">首页</a> | <a href="">产品</a> | <a href="">我的购物车</a> | <a href="">我的订单</a>
            </p>
            版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
        </div><!-- END of templatemo_footer -->


    </div><!-- END of templatemo_wrapper -->
</div><!-- END of templatemo_body_wrapper -->



<script type="text/javascript">
    $(function(){
        showUserName();
        $('#slider').nivoSlider()

        $(".imgchange").click(function() {
            $("#imgcode").attr("src", "${ctx}/drawimage?createTypeFlag=nl&date=" + new Date());
        })

        $("#username").blur(function(){
            chkusername();
            $.ajax({
                url:ctx + "/checkuser",
                type:"post",
                data:{"username":$("#username").val()},
                dataType:"json",
                success:function(data){
                    if(data.code == 1){
                        $("#un_msg").html("用户名已存在，不能重复注册");
                        $("#un_msg").css("color","#f31106");
                        $(".sub").attr("disabled",true);
                    }else{
                        $(".sub").attr("disabled",false);
                    }
                }
            })
        })
        $("#phone").focus(function () {
            var phone= $("#phone").val();
            if (phone.length==11) {

            }else {
                $("#phone_msg").html("请输入11位有效手机号码");
                $("#phone_msg").css("color","#f31106");
            }

        })
        $("#phone").blur(function () {
            if(chkphone()){

            }else {
                $("#phone_msg").html("请输入11位有效手机号码");
                $("#phone_msg").css("color","#f31106");
            }
        })
        $("#password").focus(function () {
            $("#pw_msg").html("6-16个字符，区分大小写");
            $("#pw_msg").css("color","#f31106");

        })
        $("#password").blur(function () {
            chkpassword();
        })
        $("#confirm").focus(function () {
            $("#confirm_msg").html("请与密码保持一致");
            $("#confirm_msg").css("color","#f31106");
        })
        $("#confirm").blur(function () {
            chkconfirm();
        })
        $("#vicode").focus(function () {
            $("#vicd_msg").html("请输入4位验证码，不区分大小写");
            $("#vicd_msg").css("color","#a8abab");
        })
        $("#vicode").blur(function () {
            chkimgcode();
        })
        $("#regform").submit(function () {
            if(!chkusername()){
                return false;
            }
            if(!chkphone()){
                return false;
            }
            if(!chkpassword()){
                return false;
            }
            if(!chkconfirm()){
                return false;
            }
            if(!chkimgcode()){
                return false;
            }
            $(this).submit();
        })
    });
</script>
<script type="text/javascript" src="${ctx}/js/stock-check.js"></script> <!-- 添加购物车JS脚本定义 -->
</body>
</html>